import { ref, watch, computed } from 'vue'
import { defineStore } from 'pinia'

export const useTodosStore = defineStore('todos', () => {
  // 定义状态
  const todos = ref([])

  // 定义计算属性
  const doneCount = computed(() => todos.value.filter((todo) => todo.done).length)

  const allDone = computed(() => todos.value.every((todo) => todo.done))

  const allCount = computed(() => todos.value.length)

  // 定义方法
  const getTodos = () => {
    const data = JSON.parse(localStorage.getItem('todos') || '[]')
    todos.value = data
  }

  const addTodo = (todo) => {
    todos.value.push(todo)
    // localStorage.setItem('todos', JSON.stringify(todos.value))
  }

  const toggleTodo = (id, value) => {
    const todo = todos.value.find((item) => item.id === id)
    todo.done = value
  }

  const editTodo = (id, value) => {
    const todo = todos.value.find((item) => item.id === id)
    todo.content = value
  }

  const removeTodo = (id) => {
    const index = todos.value.findIndex((item) => item.id === id)
    todos.value.splice(index, 1)
  }

  const clearDone = () => {
    todos.value = todos.value.filter((todo) => !todo.done)
  }

  const clearAll = () => {
    todos.value = []
  }

  const toggleAllDone = (event) => {
    todos.value.forEach((todo) => {
      todo.done = event.target.checked
    })
  }

  watch(
    todos,
    () => {
      localStorage.setItem('todos', JSON.stringify(todos.value))
    },
    { deep: true }
  )

  return {
    todos,
    getTodos,

    addTodo,

    toggleTodo,
    editTodo,
    removeTodo,

    doneCount,
    allDone,
    allCount,
    clearDone,
    clearAll,
    toggleAllDone,
  }
})
